<%@page contentType="text/html; UTF_8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
    <script src="${pageContext.request.contextPath}/back/statics/js/jquery-1.8.3.min.js"></script>
</head>
<body>

<!--container-fluid代表bootstrap给我们的一个容器-->
<div class="container-fluid">
    <!--用户登录-->
    <!--row代表要用当前的一行，总共有12列-->
    <div class="row">
        <!--
        col-sm-6:代表让整个的表单占6列，
        col-sm-offset-3:代表让整个表单向右偏移三列，目的是为了让表单居中显示。
        -->
        <div class="col-sm-6 col-sm-offset-3">
            <!--text-center：文本居中-->
            <h1 class="text-center">用户登录</h1>
        </div>
    </div>

    <!--完成表单-->
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <form id="inputForm">
                <div class="form-group">
                    <!--
                    for的数据代表input里的id数据，placeholder代表提示信息,
                    type代表文本类型：text文字可见，password文字不可见-->
                    <label for="name">用户名：</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="code">验证码：</label>
                    <div>
                        <input type="text" class="form-control" name="code" style="height:40px; width: 70%; float: left" id="code" placeholder="请输入验证码">
                        <img src="${pageContext.request.contextPath}/user/getImage" id="image" style="float: right;" alt="">
                    </div>
                </div>
                <!--class="btn btn-danger":btn代表按钮， btn-danger代表按钮的颜色，这个是红色-->
                <button type="button" class="btn btn-danger" id="logBtn" style="margin-top: 20px; width: 47%; margin-left: 10px;">登录</button>
                <a class="btn btn-info" href="${pageContext.request.contextPath}/back/register.jsp" style="margin-top: 20px; width: 47%; margin-left: 30px;">注册账号</a>
            </form>

        </div>
    </div>
</div>

</body>
</html>

<script>
    $(function () {
        // 绑定登录按钮的单击事件
        $("#logBtn").click(function () {
            $.post("${pageContext.request.contextPath}/user/login",$("#inputForm").serialize(),function (res) {
               if (res.status) {
                    alert(res.msg + "，点击确定进入主页");
                    location.href='${pageContext.request.contextPath}/back/index.jsp';
               } else {
                   alert(res.msg);
               }
            })
        });

        // 更换验证码
        // 给点击验证码绑定单击事件，每次点击重新发送请求，因为浏览器有缓存，所以每次点击刷新验证码之前需要清楚浏览器缓存，
        // 对此我们可以讲请求路径后面加上一个id随机数，通过Math.random()来实现，这样我们每次发送的请求路径都不同，但都会去
        // 访问获取验证码图片这个方法。
        $("#image").click(function () {
            $(this).attr("src","${pageContext.request.contextPath}/user/getImage?id="+Math.random());
        });

    })
</script>